<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./英雄联盟.css">
    <link rel="stylesheet" href="./syp/swiper-bundle.min.css">

    <style>
        .swiper-pagination {
            width: 830px;
            /* margin: auto; */
            display: block;
            left: 0;
            right: 0;
        }
        
        .swiper-pagination-bullet {
            width: 160px;
            height: 40px;
            border-radius: 0;
            opacity: 1;
            line-height: 40px;
            text-align: center;
            background-color: #e3e3e2;
            outline: none;
        }
        
        .swiper-pagination-bullet-active {
            background-color: #f7f6f6;
            border-bottom: 1px solid goldenrod;
            color: goldenrod;
        }
    </style>




</head>

<body>
    <div class="top">
        <img src="./img/ia_100000006.jpg" alt="">
        <!-- <div > </div> -->
        <div class="nav">
            <div class="a"></div>
            <img src="./img/ia_100000000.png" alt="">
            <div class="nav-top">
                <h3>游戏资料</h3>
                <p>GAME INFO</p>
            </div>
            <div class="nav-top">
                <h3>商城/合作</h3>
                <p>STORE</p>
            </div>
            <div class="nav-top">
                <h3>社区互动</h3>
                <p>COMMUNITY</p>
            </div>
            <div class="nav-top">
                <h3>赛事官网</h3>
                <p>ESPORTS</p>
            </div>
            <div class="nav-top">
                <h3>自助系统</h3>
                <p>SYSTEM</p>
            </div>
            <div class="nav-right">
                <img src="./img/搜索.png" alt="">
                <img id="shouji" src="./img/手机.png" alt="">
            </div>
            <div class="nav-right-r">
                <img src="./img/ia_100000001.png" alt=""> 亲爱的召唤师,欢迎
                <a href="">登录</a>
            </div>
            <div class="tu">
                <img src="./img/ia_100000002.jpg" alt="">
                <p>扫码下载英雄联盟</p>
                <img src="./img/ia_100000003.gif" alt="">
            </div>
        </div>
        <div class="nav-zhe">
            <div class="nav-zhe-1">
                <ul>
                    <li>
                        <a href="###">游戏下载</a>
                    </li>
                    <li>
                        <a href="###">新手引导</a>
                    </li>
                    <li>
                        <a href="">资料库</a>
                    </li>
                    <li>
                        <a href="">云顶之弈</a>
                    </li>
                    <li>
                        <a href="">攻略中心</a>
                    </li>
                    <li>
                        <a href="">开发者基地</a>
                    </li>
                    <li>
                        <a href="">海克斯战利品库</a>
                    </li>
                    <li>
                        <a href="">英雄联盟宇宙</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="###">游戏下载</a>
                    </li>
                    <li>
                        <a href="###">新手引导</a>
                    </li>
                    <li>
                        <a href="">资料库</a>
                    </li>
                    <li>
                        <a href="">云顶之弈</a>
                    </li>
                    <li>
                        <a href="">攻略中心</a>
                    </li>
                    <li>
                        <a href="">开发者基地</a>
                    </li>
                    <li>
                        <a href="">海克斯战利品库</a>
                    </li>
                    <li>
                        <a href="">英雄联盟宇宙</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="###">游戏下载</a>
                    </li>
                    <li>
                        <a href="###">新手引导</a>
                    </li>
                    <li>
                        <a href="">资料库</a>
                    </li>
                    <li>
                        <a href="">云顶之弈</a>
                    </li>
                    <li>
                        <a href="">攻略中心</a>
                    </li>
                    <li>
                        <a href="">开发者基地</a>
                    </li>
                    <li>
                        <a href="">海克斯战利品库</a>
                    </li>
                    <li>
                        <a href="">英雄联盟宇宙</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="###">游戏下载</a>
                    </li>
                    <li>
                        <a href="###">新手引导</a>
                    </li>
                    <li>
                        <a href="">资料库</a>
                    </li>
                    <li>
                        <a href="">云顶之弈</a>
                    </li>
                    <li>
                        <a href="">攻略中心</a>
                    </li>
                    <li>
                        <a href="">开发者基地</a>
                    </li>
                    <li>
                        <a href="">海克斯战利品库</a>
                    </li>
                    <li>
                        <a href="">英雄联盟宇宙</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="###">游戏下载</a>
                    </li>
                    <li>
                        <a href="###">新手引导</a>
                    </li>
                    <li>
                        <a href="">资料库</a>
                    </li>
                    <li>
                        <a href="">云顶之弈</a>
                    </li>
                    <li>
                        <a href="">攻略中心</a>
                    </li>
                    <li>
                        <a href="">开发者基地</a>
                    </li>
                    <li>
                        <a href="">海克斯战利品库</a>
                    </li>
                    <li>
                        <a href="">英雄联盟宇宙</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- ======================= -->
    <div class="root">
        <div class="ju">
            <div class="ju-1">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="lunbo swiper-slide"><img src="./img/ia_100000007.jpeg" alt=""></div>
                        <div class="lunbo swiper-slide"><img src="./img/ia_100000008.jpeg" alt=""></div>
                        <div class="lunbo swiper-slide"><img src="./img/ia_100000009.jpeg" alt=""></div>
                        <div class="lunbo swiper-slide"><img src="./img/ia_100000010.jpeg" alt=""></div>
                        <div class="lunbo swiper-slide"><img src="./img/ia_100000011.jpeg" alt=""></div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="ju-right">
                    <div class="ju-right-nva">
                        <div>综合</div>
                        <div>周二</div>
                        <div>赛事</div>
                        <div>攻略</div>
                        <div>社区</div>
                    </div>
                    <div class="article">
                        <p>九周年掌盟许愿 赢全英雄全皮肤</p>
                        <ul>
                            <li> 公告 9周年战斗之夜活动 现已开启 08-20</li>
                            <li>新闻 英雄联盟9周年宇宙竞技场今日盛大开幕！ 08-20</li>
                            <li>新闻 快速读懂掌盟九周年专属活动 08-24</li>
                            <li>娱乐 9周年盛典 周杰伦喊话王俊凯周游峡谷 08-24</li>
                            <li>视频 LOL九周年玩家真人故事《我的表面兄弟》 08-24</li>
                            <li>赛事 恭喜JDG晋级2020全球总决赛 08-23</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="ju-2">
                <div class="ju-2-left">
                    <div class="ju-2-left-nav">
                        <div class="ju-2-left-nav-left">
                            <p>热门活动</p>
                        </div>
                        <div class="ju-2-left-nav-right">
                            <p>正在进行</p>
                            <p>商城特惠</p>
                            <p>长期活动</p>
                        </div>

                    </div>
                    <div class="ju-2-left-article">
                        <div class="ju-2-kuai">
                            <div class="ju-2-kuai-zhe">
                                <p>LOL 兄弟组队专区</p>
                                <p>无兄弟不转区,快邀请你的小朋友快来玩耍吧,来吧,来吧,点我开始,快速地</p>
                            </div>
                            <img src="./img/ia_100000012.jpg" alt="">
                            <!-- <img src="./img/新建文件夹/商城特惠1.jpg" alt=""> -->

                            <p>魔术师 佐伊 至嗪</p>
                            <p>155天后结束</p>
                        </div>
                        <div class="ju-2-kuai">
                            <div class="ju-2-kuai-zhe">
                                <p>LOL 兄弟组队专区</p>
                                <p>无兄弟不转区,快邀请你的小朋友快来玩耍吧,来吧,来吧,点我开始,快速地</p>
                            </div>
                            <img src="./img/ia_100000013.jpg" alt="">

                            <p>魔术师 佐伊 至嗪</p>
                            <p>155天后结束</p>
                        </div>
                        <div class="ju-2-kuai">
                            <div class="ju-2-kuai-zhe">
                                <p>LOL 兄弟组队专区</p>
                                <p>无兄弟不转区,快邀请你的小朋友快来玩耍吧,来吧,来吧,点我开始,快速地</p>
                            </div>
                            <img src="./img/ia_100000014.jpg" alt="">

                            <p>魔术师 佐伊 至嗪</p>
                            <p>155天后结束</p>
                        </div>
                        <div class="ju-2-kuai">
                            <div class="ju-2-kuai-zhe">
                                <p>LOL 兄弟组队专区</p>
                                <p>无兄弟不转区,快邀请你的小朋友快来玩耍吧,来吧,来吧,点我开始,快速地</p>
                            </div>
                            <img src="./img/ia_100000015.jpg" alt="">

                            <p>魔术师 佐伊 至嗪</p>
                            <p>155天后结束</p>
                        </div>
                    </div>
                </div>
                <div class="ju-2-right">
                    <div class="ju-2-right-top">
                        <img src="./img/新建文件夹/hh.gif" alt="">
                        <div class="xingshou">
                            <img src="./img/新建文件夹/新手必备.png" alt="">
                            <img src="./img/新建文件夹/领取中心.png" alt="">
                        </div>
                    </div>
                    <div class="ju-2-right-bottom">
                        <div class="ju-2-right-bottom-xiao"> <img src="./img/新建文件夹/客服.png" alt=""> 在线客服</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 秩序殿堂</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 游戏资料</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 峡谷之巅</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 云顶制衣</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 攻略中心</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> LOL宇宙</div>
                        <div class="ju-2-right-bottom-xiao"><img src="./img/新建文件夹/客服.png" alt=""> 微信绑定</div>
                    </div>
                </div>
            </div>
            <div class="ju-3">
                <div class="ju-3-left">
                    <div class="ju-3-left-left"><img src="./img/ia_100000016.jpg" alt="">
                        <div class="ju-3-zhe">
                            <p>封魔剑魂永恩现已上线</p>
                            <div>查看详情</div>
                        </div>
                    </div>
                    <div class="ju-3-left-right">
                        <div class="ju-3-zhe2">
                            <video width="430px" height="250" controls>
                                <source src="https://v.qq.com/x/page/g3122kaeba5.html">
                            </video>
                            <div class="zhe2-xia">
                                <p>花落故人归</p>
                                <p>灵魂莲花序章</p>
                                <div>查看详情</div>
                            </div>
                        </div>
                        <img src="./img/ia_100000018.jpg" alt=""></div>
                    <!-- <div class="xia"></div> -->
                </div>
                <div class="ju-3-right">
                    <div class="ju-3-right-left">
                        <div class="ju-3-right-xiao"><img src="./img/ia_100000021.jpg" alt=""></div>
                        <div class="ju-3-right-xiao"><img src="./img/ia_100000023.jpg" alt=""></div>
                    </div>
                    <div class="ju-3-right-right">
                        <div class="ju-3-right-xiao1"><img src="./img/ia_100000022.jpg" alt=""></div>
                        <div class="ju-3-right-xiao2">周免</div>
                    </div>
                </div>
            </div>
            <div class="xia">
                <img src="./img/新建文件夹/0.jpg" alt="">
                <img src="./img/新建文件夹/0 (1).jpg" alt="">
                <img src="./img/新建文件夹/0 (2).jpg" alt="">
                <img src="./img/新建文件夹/0 (3).jpg" alt="">
                <img src="./img/新建文件夹/0 (4).jpg" alt="">
                <img src="./img/新建文件夹/0 (5).jpg" alt="">
                <img src="./img/新建文件夹/0 (6).jpg" alt="">
                <!-- <img src="./img/新建文件夹/0 (7).jpg" alt=""> -->
            </div>
            <div class="ju-4">

            </div>
        </div>
    </div>
</body>

</html>
<script src="./英雄联盟.js"></script>
<script src="./syp/swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

    });
    var spanarray = document.querySelectorAll(".swiper-pagination-bullet")
    var textArray = ["阿卡丽神秘商店", "灵魂莲华抽奖", "LPL季后赛决赛", "浪漫七夕", "许愿赢全英雄全皮肤"];
    for (var i = 0; i < spanarray.length; i++) {
        spanarray[i].innerHTML = textArray[i];
    }
    var div1 = document.querySelectorAll(".ju-right-nva div");
    var p1 = ["九周年掌盟许愿 赢全英雄全皮肤", "英雄联盟浪漫七夕活动预告", "参赛赢手办！地铁嘉年华-LPL夏季群英荟", "弈图道破：10.16b一图上钻 最平衡版本", "8月25日LPL季后赛海报：SN“漫长一战"];
    var pwen = document.querySelector(".article>p");
    for (var i = 0; i < div1.length; i++) {
        div1[i].onmouseenter = function() {
            for (var j = 0; j < div1.length; j++) {
                if (this == div1[j]) {
                    pwen.innerHTML = p1[j];

                }
            }
            // tu.style.opacity = 1;
        }
    }
</script>